<template>

	<view class="box">
		<PublicTitle :title="title" subtitle="但行好事,莫问前程"></PublicTitle>
		<view class="layout1">
			<navigator class="nav" url="/pages/list/list"><text>List：</text>
				<br />：：初始List
			</navigator>
			<navigator class="nav" url="/pages/demo1/demo1"><text>Demo1：</text>
				<br />：：Vue3模版语法插值表达式
			</navigator>
			<navigator class="nav" url="/pages/demo2/demo2"><text>Demo2：</text>
				<br />：：ref 定义响应式数据变量
			</navigator>
			<navigator class="nav" url="/pages/demo3/demo3"><text>Demo3：</text>
				<br />：：v-band 指令配合图片轮播图案例
			</navigator>
			<navigator class="nav" url="/pages/demo4/demo4"><text>Demo4：</text>
				<br />：：class类和style内联样式的绑定
			</navigator>
			<navigator class="nav" url="/pages/demo5/demo5"><text>Demo5：</text>
				<br />：：v-on 原生事件监听以及组件内置事件处理
			</navigator>
			<navigator class="nav" url="/pages/demo6/demo6"><text>Demo6：</text>
				<br />：：创建自定义模板
			</navigator>
			<navigator class="nav" url="/pages/demo7/demo7"><text>Demo7：</text>
				<br />：：v-if条件渲染及v-show的选择对比
			</navigator>
			<navigator class="nav" url="/pages/demo8/demo8"><text>Demo8：</text>
				<br />：：v-for列表渲染的用法
			</navigator>
			<navigator class="nav" url="/pages/demo9/demo9"><text>Demo9：</text>
				<br />：：购物车案例
			</navigator>
			<navigator class="nav" url="/pages/demo10/demo10"><text>Demo10：</text>
				<br />：：v-model 小鸡案例，表单focus和blur事件用法
			</navigator>
			<navigator class="nav" url="/pages/demo11/demo11"><text>Demo11：</text>
				<br />：：热梗案例，知识点阶段综合汇总
			</navigator>
			<navigator class="nav" url="/pages/demo12/demo12"><text>Demo12：</text>
				<br />：：computed计算属性用法，以及箭头函数
			</navigator>
			<navigator class="nav" url="/pages/demo13/demo13"><text>Demo13：</text>
				<br />：：watch和watchEffect监听的使用
			</navigator>
			<navigator class="nav" url="/pages/demo0/demo0"><text>Demo0：</text>
				<br />：：默认值
			</navigator>
		</view>
		<view class="layout2">
			<text>深入Demos</text>
		</view>
		<view class="layout3">
			<navigator class="nav" url="/pages/user/user"><text>Demos：</text>
				<br />：：Prop传值使用，以及校验和默认值
			</navigator>
			<navigator class="nav" url="/pages/demos1/demos1"><text>Demos1：</text>
				<br />：：插槽slots及具名插槽实现组件高度定制化
				<br />：：[点不开，设置在了分类底部导航栏]
				<br />：：取消setTabBarBadge数字显示
			</navigator>
			<navigator class="nav" url="/pages/demos2/demos2"><text>Demos2：</text>
				<br />：：插槽slots及具名插槽实现组件高度定制化
				<br />：：[点不开，因为设置在了个人底部导航栏]
				<br />：：取消showTabBarRedDot标志显示
			</navigator>
			<navigator class="nav" url="/pages/demos3/demos3"><text>Demos3：</text>
				<br />：：组件中emit的生命触发事件，子向父传值
			</navigator>
			<navigator class="nav" url="/pages/demos4/demos4"><text>Demos4：</text>
				<br />：：vue3组合式API中组件的生命周期函数（钩子函数)
			</navigator>
			<navigator class="nav" url="/pages/demos5/demos5"><text>Demos5：</text>
				<br />：：使用defineExpose暴露子组件的属性及方法
			</navigator>
			<navigator class="nav" url="/pages/demos6/demos6?name=首页&age=20">
				<text>Demos6：</text>
				<br />：：uniapp页面的生命周期onLoad,onReady,onShow,onHide,onUnload,onPageScroll在vue3组合式API中的使用
			</navigator>
			<navigator class="nav" url="/pages/demos7/demos7"><text>Demos7：</text>
				<br />：：响应式单位RPX以及搭配使用UI产品工具
				<br />：：@import导入css样式以及scss变量用法与static目录
				<br />：：pages.json页面路由设置使用方式，globalSty的属性
				<br />：：pages设置页面路径以及窗口表现
				<br />：：tabBar设置底部菜单选项以及iconfont图标
				<br />：：manifest.json配置和注册微信小程序appid
				<br />：：vite_config中文安装插件unplugin-auto-import自动导入vue和uniapp
			</navigator>
			<navigator class="nav" url="/pages/demos8/demos8"><text>Demos8：</text>
				<br />：：uni_api交互反馈showToast的用法
				<br />：：uni_api交互反馈showLoading和showModel的用法
				<br />：：uni_api交互反馈showActionSheet从底部向上弹出操作菜单
			</navigator>
			<navigator class="nav" url="/pages/demos9/demos9"><text>Demos9：</text>
				<br />：：动态设置页面导航条的样式
			</navigator>
			<navigator class="nav" url="/pages/demos10/demos10"><text>Demos10：</text>
				<br />：：setTabBar设置TabBar和下拉刷新
			</navigator>
			<navigator class="nav" url="/pages/demos11/demos11"><text>Demos11：</text>
				<br />：：页面和路由API-navigateTo以及页面栈gitCurrentPages
			</navigator>
			<navigator class="nav" url="/pages/demos12/demos12"><text>Demos12：</text>
				<br />：：StorageSync数据缓存API
			</navigator>
			<navigator class="nav" url="/pages/demos13/demos13"><text>Demos13：</text>
				<br />：：uni.request发起网络请求三种回调结果调用
				<br />：：callback传统异步请求（容易出现回调地狱）
				<br />：：Promise现代JavaScript异步编程用法
				<br />：：ES7 async await 异步的请求方式
			</navigator>
			<navigator class="nav" url="/pages/demos14/demos14"><text>Demos14：</text>
				<br />：：for和forEach循环的性能以及异步同步化差异
				<br />：：以及map filter reduce every some includes indexof 内置对象用法
			</navigator>
			<navigator class="nav" url="/pages/webview/webview"><text>webview：</text>
				<br />：：webview跳转
			</navigator>
			<navigator class="nav" url="/pages/requestDemo/requestDemo"><text>requestdemo：</text>
				<br />：：【宠物案例】
				<br />：：页面布局
				<br />：：调用宠物API野口渲染到页面中
				<br />：：使用API接口通过传输头传递Access-key
				<br />：：previewimage图片预览和lazy-load懒加载
				<br />：：对回调结果严格处理then catch finally用法
				<br />：：完成下拉刷新和触底加载更多
				<br />：：pageScrollTo滚动到顶部和刷新
				<br />：：uni-ui扩展组件引入使用
				<br />：：分段器组件实现点击切换萌宠类型
			</navigator>
			<navigator class="nav" url="/pages/demos0/demos0"><text>Demos0：</text>
				<br />：：默认值
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const title = ref('首页')
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 10rpx;
		background: #FF6F61;

		.layout1 {
			display: flex;
			flex-direction: column;
			// flex-wrap: wrap;
			// flex-flow: row wrap;
			// justify-content: center;
			// align-items: center;
			align-content: space-evenly;
			background: #FF6F61;

			.nav {
				box-sizing: border-box;
				background: #FF6F61;
				margin-bottom: 20rpx;
				border-bottom-width: 7rpx;
				border-bottom-color: #FFC837;
				border-bottom-style: solid;
				border-top-width: 7rpx;
				border-top-color: #FFC837;
				border-top-style: solid;
				border-radius: 1em;
				padding: 8rpx 5rpx 8rpx 5rpx;
				color: #2E1F1F;
				font-weight: 500;
				font-size: 29rpx;
				line-height: 60rpx;

				text {
					font-size: 0.8rem;
					color: #000;
					font-weight: 700;
				}
			}
		}

		.layout2 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #FF6F61;
			padding: 80rpx;

			text {
				font-size: 1.9rem;
				font-weight: 900;
			}
		}

		.layout3 {
			display: flex;
			flex-direction: column;
			align-content: space-evenly;
			background: #FF6F61;

			.nav {
				box-sizing: border-box;
				background: #FF6F61;
				margin-bottom: 20rpx;
				border-bottom: 7rpx solid #FFC837;
				border-top: 7rpx solid #FFC837;
				border-radius: 1.1rem;
				padding: 8rpx 5rpx 8rpx 5rpx;
				color: #2E1F1F;
				font-weight: 500;
				font-size: 29rpx;
				line-height: 60rpx;

				text {
					font-size: 0.8rem;
					color: #000;
					font-weight: 700;
				}
			}
		}
	}
</style>